<template>
    <div class="table" >
           <!-- columns 对应表格列以及每列名称 -->
            <!-- props.data 对应的数据 -->
            <!-- operate 操作的信息 显示哪些操作 以及对应的方法 -->
            <!-- detailText 用于显示点击第一列数据 跳转到的位置 -->
        <a-table :columns="props.columns" :data-source="props.data"
            :pagination="pagination"
            :row-selection="{ onChange: onSelectChange }"
            bordered
            >
            <template #bodyCell="{ column, record, text }">
                <!-- 点击进行跳转 跳转到第一列的详细数据 -->
                <template v-if="column.title === props.detailText.nameOne">
                    <router-link :to="props.detailText.goTo">{{ text }}</router-link>
                </template>
                <template v-if="column.title === '操作'">
                    <ul>,
                        <li v-for="item in props.operate" :key="item.title" @click="item.click(record)"><span><span :class="['iconfont',item.icon]">
                        </span>{{ item.title}}</span></li>
                    </ul>
                </template>
                <template v-if="column.title === '公司星级'">
                    <el-rate v-model="record.starRating" disabled  />
                </template>
            </template>
        </a-table>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineProps, watch, reactive } from 'vue';


// 父级获取的数据 
const props = defineProps(['data', 'columns', 'operate','detailText'])



// 修改列 当多选框状态发生变化 进行修改
function onSelectChange(selectedRowKeys: []) {
    // 打印数据的key值 数据的key键的值 要有key键 俺不会改成 id
    console.log('selectedRowKeys changed: ', selectedRowKeys);
}

//分页
const pagination = reactive({
    showQuickJumper: true,
    total: props.data,
    pageSizeOptions: ['5', '8', '10', '15'],
    showSizeChanger: true,
    showTotal: (total: number) => `共 ${total} 条`
})


</script>

<style lang="less" scoped>

.table {
    width: 100%;
    ul {
        display: flex;
        color: rgb(51, 148, 254);

        li {
            margin: 0px 2px;
        }
    }
}

.el-table {
    margin-top: 20px;
    font-size: 10px;
}

.el-pagination {
    float: right;
}

.bot {
    display: flex;
    align-items: center;
    padding: 20px 0;
    justify-content: space-between;
}

.left {
    width: 350px;
    display: flex;
    justify-content: space-evenly;
}

.left div {
    border: 1px solid #ccc;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
</style>